<template>
  <div class="learner-list">
    <!-- 查询表单 -->
    <el-form :inline="true" class="query-form" style="padding: 50px 80px; background-color: #F2F2F2">
      <el-form-item label="学员姓名：">
        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="searchForm.phone" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="学校：">
        <el-select v-model="searchForm.school" placeholder="请选择" style="width: 200px;">
          <el-option label="学校A" value="schoolA"></el-option>
          <el-option label="学校B" value="schoolB"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教务：">
        <el-input v-model="searchForm.educationAdmin" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="入学时间：" style="margin-top: 20px;width: 350px;">
        <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
      <el-form-item style="position: relative;margin-top: 20px;">
        <el-button type="success" @click="exportData" style="position: relative;margin-right: -30px;">导出数据</el-button>
      </el-form-item>
    </el-form>

    <!-- 学员列表 -->
    <el-table :data="learnerList" style="width: 100%;" class="learner-table">
      <el-table-column prop="name" label="学员姓名" min-width="100"></el-table-column>
      <el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
      <el-table-column prop="campus" label="所在校区" min-width="100"></el-table-column>
      <el-table-column prop="educationAdmin" label="教务" min-width="80"></el-table-column>
      <el-table-column prop="enrollmentDate" label="入学日期" min-width="100"></el-table-column>
      <el-table-column prop="studentId" label="学员编号" min-width="80"></el-table-column>
      <el-table-column prop="gender" label="性别" min-width="60"></el-table-column>
      <el-table-column prop="age" label="年龄" min-width="60"></el-table-column>
      <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
      <el-table-column label="操作" min-width="120">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="primary" @click="handleView(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import {ref} from 'vue';

// 搜索表单数据
const searchForm = ref({
  name: '',
  phone: '',
  school: '',
  educationAdmin: '',
  dateRange: ''
});

// 学员列表数据
const learnerList = ref([
  {
    name: '王小一',
    phone: '15353335333',
    campus: '保百校区',
    educationAdmin: '张三',
    enrollmentDate: '2022-03-23',
    studentId: '12',
    gender: '女',
    age: '23',
    remark: '11111'
  }
]);

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(1); // 总条数

// 处理查询
const handleSearch = () => {
  // 这里可以添加查询逻辑
  console.log('搜索条件：', searchForm.value);
};

// 处理重置
const handleReset = () => {
  // 重置搜索表单
  searchForm.value = {
    name: '',
    phone: '',
    school: '',
    educationAdmin: '',
    dateRange: ''
  };
};

// 导出数据
const exportData = () => {
  // 这里可以添加导出数据的逻辑
  console.log('导出数据');
};

// 编辑学员信息
const handleEdit = (index, row) => {
  console.log('编辑学员信息：', index, row);
};

// 查看学员详情
const handleView = (index, row) => {
  console.log('查看学员详情：', index, row);
};

// 处理分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  console.log(`每页 ${val} 条`);
};

// 处理当前页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  console.log(`当前页: ${val}`);
};
</script>

<style scoped>.learner-list {
  padding: 0px;
}

.learner-table :deep(.el-table__header) th {
  background-color: #DBDBDB;
  color: #000000;
}

.query-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.query-form .el-form-item {
  margin-bottom: 15px;
}

.learner-table {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
